<!-- 个人中心 -->
<template>
	<view>
	<view class="topBox">
		<view class="top" >
		<userinfo-card v-if="userHeadData && userHeadData.style" :scrollTop="scrollTop" :detail="userHeadData" :userLevelObj="userLevelObj" @onShare="onShare"></userinfo-card>
		</view>
	</view>
	<view class="zhong">
		<view class="zhongBox">
<!--			<view @tap="jump('/pages/index/product/product', {  })">-->
<!--				<image style="width: 60rpx;height: 60rpx;" src="../../static/images/user1.png"></image>-->
<!--				<view class="zhongname">付邮轻享产品</view>-->
<!--			</view>-->
<!-- 会员礼遇页面     /pages/index/courtesy/index-->
<view @tap="jump('/pages/index/wallet/index')">
				<image style="width: 60rpx;height: 60rpx;" src="../../static/images/user3.png"></image>
				<view class="zhongname">钱包</view>
			</view>
			<view @tap="jump('/pages/app/coupon/serveCardList')">
				<image style="width: 60rpx;height: 60rpx;" src="../../static/images/user2.png"></image>
				<view class="zhongname">服务券</view>
			</view>
			<view  @tap="jump('/pages/app/coupon/list')">
				<image style="width: 60rpx;height: 60rpx;" src="../../static/images/user4.png"></image>
				<view class="zhongname">卡券兑换</view>
			</view>
		</view>
	</view>

	<view class="zhong1"  >
		<view class="u-flex" style="padding: 24rpx;">
			<view class="zhong-title" style="flex: 1;">购物订单</view>
			<view @tap="jump('/pages/order/list', { type: 'all' })">
				<text class="dd">全部订单</text>
				<image style="width: 16rpx;height: 24rpx;" src="../../static/images/user9.png"></image>
			</view>
		</view>

		<view class="zhongBox1">
			<view class="goodcontent" @tap="jump('/pages/order/list', { type: 'nopay' })">
        <view class="goodnum" v-if="userData.order_num.nopay>0">{{userData.order_num.nopay>100?'...':userData.order_num.nopay}}</view>
				<image style="width: 52rpx;height: 52rpx;" src="../../static/images/user5.png"></image>
				<view class="zhongname2">待付款</view>
			</view>
			<view class="goodcontent" @tap="jump('/pages/order/list', { type: 'nosend' })">
        <view class="goodnum" v-if="userData.order_num.nosend>0">{{userData.order_num.nosend>100?'...':userData.order_num.nosend}}</view>
				<image style="width: 52rpx;height: 52rpx;" src="../../static/images/user6.png"></image>
				<view class="zhongname2">待发货</view>
			</view>
			<view class="goodcontent" @tap="jump('/pages/order/list', { type: 'noget'})">
        <view class="goodnum" v-if="userData.order_num.noget>0">{{userData.order_num.noget>100?'...':userData.order_num.noget}}</view>
				<image style="width: 52rpx;height: 52rpx;" src="../../static/images/user7.png"></image>
				<view class="zhongname2">待收货</view>
			</view>
			<view class="goodcontent" @tap="jump('/pages/order/after-sale/list')">
        <view class="goodnum goodnums" v-if="userData.order_num.aftersale>0">{{userData.order_num.aftersale>100?'...':userData.order_num.aftersale}}</view>
				<image style="width: 52rpx;height: 52rpx;" src="../../static/images/user8.png"></image>
				<view class="zhongname2">退换/售后</view>
			</view>
		</view>
		<view class="box2">
      <view @tap="jump( '/pages/app/coupon/serveCardUselist')" class="boxitem u-flex">
        <view class="u-flex-1">服务订单</view>
        <image style="width: 16rpx;height: 24rpx;" src="../../static/images/user9.png"></image>
      </view>
			<view @tap="jump('/pages/index/integral/index')" class="boxitem u-flex">
				<view class="u-flex-1">积分管理</view>
				<image style="width: 16rpx;height: 24rpx;" src="../../static/images/user9.png"></image>
			</view>
			<view class="boxitem u-flex" @tap="onViewlog()">
				<view class="u-flex-1">我的足迹</view>
				<image style="width: 16rpx;height: 24rpx;" src="../../static/images/user9.png"></image>
			</view>
      <view class="boxitem u-flex" @tap="onViewstar()">
        <view class="u-flex-1">我的收藏</view>
        <image style="width: 16rpx;height: 24rpx;" src="../../static/images/user9.png"></image>
      </view>
			<view class="boxitem u-flex" @tap="jump('/pages/user/address/list')">
				<view class="u-flex-1">收货地址</view>
				<image style="width: 16rpx;height: 24rpx;" src="../../static/images/user9.png"></image>
			</view>
			<view class="boxitem u-flex">
				<view class="kefu u-flex-1"><button open-type='contact' plain="true" session-from=''>在线客服</button></view>
				<image style="width: 16rpx;height: 24rpx;" src="../../static/images/user9.png"></image>
			</view>
			<view @tap="jump('/pages/index/feedback/index')" class="boxitem u-flex">
				<view class="u-flex-1">意见反馈</view>
				<image style="width: 16rpx;height: 24rpx;" src="../../static/images/user9.png"></image>
			</view>
			<view @tap="jump('/pages/index/useragreement')" class="u-flex" style="height: 100rpx;">
				<view class="u-flex-1">用户协议</view>
				<image style="width: 16rpx;height: 24rpx;" src="../../static/images/user9.png"></image>
			</view>
		</view>
		<view v-if="isLogin==true"  class="layout" @tap="showModal = true">
			退出登录
		</view>
	</view>
    <!--   购物车的按钮-->
    <shopro-float-shopcart-btn></shopro-float-shopcart-btn>
	<!-- 登录提示 -->
	<shopro-auth-modal></shopro-auth-modal>
	<u-modal
		ref="uModal"
		v-model="showModal"
		:show-cancel-button="true"
		confirm-color="#F54141"
		cancel-color="#666666"
		@confirm="confirmLogOut"
		content="确定退出登录？"
	></u-modal>
	</view>
</template>

<script>
import shBanner from './components/sh-banner.vue';
import shGridSwiper from './components/sh-grid-swiper.vue';
import shAdv from './components/sh-adv.vue';
import shRichtext from './components/sh-richtext.vue';
import shCell from './components/sh-cell.vue';
import shGrid from './components/sh-grid.vue';
import shOrderCard from './components/sh-order-card.vue';
import shWallet from './components/sh-wallet.vue';
import shHotGoods from './components/sh-hot-goods.vue';

import userinfoCard from './user/userinfo-card.vue';

import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';

import share from '@/shopro/share';

export default {
	components: {
		shBanner,
		shGridSwiper,
		shAdv,
		shRichtext,
		shCell,
		shGrid,
		shWallet,
		shOrderCard,
		shHotGoods,

		userinfoCard
	},
	data() {
		return {
			scrollTop: 0,
			showShare: false,
			enable: false ,//是否开启吸顶。
			showModal: false,
			userLevelObj:{}
		};
	},
	computed: {
		...mapGetters(['initShop', 'userTemplate', 'isLogin', 'userInfo', 'authType','userOtherData']),
		userHeadData() {
			if (this.userTemplate?.length) {
        console.log("==== this.userOtherData:", this.userOtherData)
				return this.userTemplate[0].content;
			}
		},
    userData(){
		  return this.userOtherData
    }
	},
	// 下拉刷新
	onPullDownRefresh() {
		this.init();
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},

	onShow() {
		console.log('this.isLogin',this.isLogin)
		if (this.isLogin) {
			this.init();
			this.getUserData();
			this.getuserLevelNeed()
		}
		this.enable = true;
	},
  created(){
    console.log("=userData:",this.userData)
  },
	methods: {
		...mapActions(['getUserInfo', 'showAuthModal', 'getUserData' ,'logout']),
		//会员等级
		getuserLevelNeed(){
			this.$https('common.userLevelNeed',{}, '加载中...')
				.then(res => {
					if (res.code === 1) {
						this.userLevelObj=res.data
						console.log('111',res)
					}
				})
		},
		onShare() {
			this.showShare = true;
			uni.hideTabBar();
		},
		// 初始化
		init() {
			this.getUserInfo()
				.then(res => {
					uni.stopPullDownRefresh();
				})
				.catch(e => {
					uni.stopPullDownRefresh();
				});
		},
		jump(path, query) {
			this.$Router.push({
				path: path,
				query: query
			});
		},
		// 退出登录
		confirmLogOut() {
			this.logout();
		},
		// 跳转客服
		onService() {
			this.$Router.push('/pages/public/chat/index');
		},
		// 浏览足迹
		onViewlog() {
			this.$Router.push('/pages/user/view-log');
		},
    // 我的收藏
    onViewstar(){
      this.$Router.push('/pages/user/favorite');
    }
	}
};
</script>

<style lang="scss">
	button[plain]{ border:0 }
	.kefu button{
		padding: 0px !important;
		    text-align: left !important;
		    font-size: 32rpx !important;
	}
.copyright-box {
	.copyright-text {
		font-size: 22rpx;
		font-weight: 500;
		color: #c4c4c4;
	}
}
.topBox {
		height: 470rpx;
		background: #000000;
	}

	.top {
		// display: flex;
		// padding-left: 58rpx;
		// padding-top: 45rpx;
		// align-items: center;
	}

	.topitem1 {
		margin-left: 27rpx;
	}

	.top1 {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		text-align: center;
		margin-top: 40rpx;
	}

	.name {
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #FFFFFF;
	}

	.content {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		margin-top: 19rpx;
	}

	.num {
		font-size: 34rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #FFFFFF;
	}

	.title {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		opacity: 0.64;
		margin-top: 18rpx;
	}

	.zhong {
		height: 180rpx;
		background: #282828;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		margin: 0 32rpx;
		margin-top: -180rpx;
	}
	.zhong1{
		height: 234rpx;
		background: #ffffff;
		border-radius: 20rpx;
		margin: 32rpx 32rpx;
	}

	.zhongBox {
		height: 100%;
		display: flex;
		    text-align: center;
		    justify-content: space-around;
		    align-items: center;
	}

	.zhongBox1 {
		display: flex;
		    text-align: center;
		    justify-content: space-around;
		    align-items: center;
			margin-top: 20rpx;
    .goodcontent{
      position: relative;
      .goodnum{
        position: absolute;
        top: -20rpx;
        right: -10rpx;
        font-size: 20rpx;
        color: #fff;
        background: #000000;
        width: 30rpx;
        height: 30rpx;
        border-radius: 50%;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .goodnums{
        right: 0;
      }
    }
	}
	.zhong-title {
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #333333;
		padding-left: 24rpx;
	}

	.zhongname {
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
	}

	.zhongname2 {
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
		line-height: 50rpx;
	}

	.box2 {
		// height: 920rpx;
		background: #FFFFFF;
		border-radius: 28rpx;
		margin-top: 28rpx;
		font-size: 32rpx;
		padding: 0rpx 30rpx 0px 30rpx;
		margin-bottom: 40rpx;

	}

	.xiatitle {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
		margin-left: 16rpx;
	}

	.xiaitem {
		display: flex;
	}

	.xiaBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.xiabr {
		border: 1px solid #F2F2F2;
		margin-top: 30rpx;
	}

	.item {
		margin-top: 26rpx;
	}
	.dd{
		margin-right: 8rpx;
		color: #8E8E8E;
	}
	.boxitem{
		height: 100rpx;
		border-bottom: 1px solid #E5E5E5;
	}
	.layout{
		    border-radius: 28rpx;
			border: 1px solid #E5E5E5;

			margin-bottom: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 72rpx;
	}
</style>
